<template>
  <el-upload
    :disabled="disabledUpload"
    :action="action"
    :multiple="false"
    :name="name"
    :headers="header"
    :with-credentials="true"
    :show-file-list="false"
    :before-upload="beforeUpload"
    :on-success="onUploadSuccess"
    :on-error="onUploadError"
  >
    <el-button
      v-waves
      plain
      :size="size"
      :disabled="disabledButton"
    >{{ buttonText }}
    </el-button>
  </el-upload>
</template>

<script>
import waves from '@/directive/waves'
import { getToken } from '@/utils/auth.js'
import settings from '@/settings'
import { getExtName, checkExtName } from '@/utils/file.js'
import { MessageBox } from 'element-ui'
import { Loading } from 'element-ui'

const tokenName = settings.tokenName
export default {
  name: 'ButtonUpload',
  directives: { waves },
  props: {
    disabledUpload: {
      type: Boolean,
      require: false,
      default: false
    },
    disabledButton: {
      type: Boolean,
      require: false,
      default: false
    },
    action: {
      type: String,
      require: true,
      default: undefined
    },
    buttonText: {
      type: String,
      default: '上传'
    },
    fileTypes: {
      type: Array,
      default() {
        return ['txt', 'log', 'jpg', 'jpeg', 'png', 'gif', 'pdf', 'doc', 'docx', 'wps', 'xls', 'xlsx', 'et', 'sql', 'csv']
      }
    },
    name: {
      type: String,
      default: 'files'
    },
    size: {
      type: String,
      default: 'mini'
    },
    checkType: {
      type: Boolean,
      default: false
    },
    checkTypeMessage: {
      type: String,
      default: undefined
    },
    showLoading: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      header: {

      },
      loadingInstance: undefined
    }
  },
  created() {
    this.header[tokenName] = getToken()
  },
  methods: {
    beforeUpload(file) {
      if (!this.checkType) {
        return
      }

      if (!checkExtName(file.name, this.fileTypes)) {
        const extName = getExtName(file.name)
        let message = '不支持上传该类文件'

        if (this.checkTypeMessage !== undefined) {
          message = this.checkTypeMessage
        } else if (extName) {
          message = `不支持上传后缀为${extName}的文件`
        }

        this.$message({
          message: message,
          type: 'error'
        })
        return false
      }

      if (this.showLoading) {
        this.loadingInstance = Loading.service({ fullscreen: true, text: '正在上传文件' })
      }
      return true
    },
    onUploadSuccess(response) {
      if (this.loadingInstance !== undefined) {
        this.loadingInstance.close()
      }

      if (response.code !== 0) {
        if (response.code === 401) {
          MessageBox.confirm('您的登录已经失效，请重新登录', '系统提示', {
            confrimButtonText: '重新登录',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            this.$store.dispatch('user/resetToken').then(() => {
              location.reload()
            })
          })
        } else {
          this.$message({
            message: response.message || 'Error',
            type: 'error',
            duration: 5 * 1000
          })
        }
      } else {
        this.$emit('on-success', response.data)
      }
    },
    onUploadError() {
      if (this.loadingInstance !== undefined) {
        this.loadingInstance.close()
      }

      this.$message({
        message: '文件上传失败，请重试',
        type: 'error'
      })
    }
  }
}
</script>

<style scoped>

</style>
